import React, { useState, useEffect } from 'react';
import './xpzq.css';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile'
import axios from 'axios'
import { CloseOutline } from 'antd-mobile-icons'
const Xpzq = () => {
    const navigate = useNavigate();
    // 获取列表数据
    const [list, setlist] = useState([])
    const getlist = () => {
        axios.get('http://localhost:3000/chen_getlist').then(res => {
            setlist(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [])
    // 随机选择四个列表项
    const sisilist = React.useMemo(() => {
        if (list.length === 0) return [];
        const shuffled = list.slice();
        for (let i = shuffled.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled.slice(0, 4);
    }, [list]);
    return (
        <div style={{ background: "white" }}>
            <NavBar backIcon={<CloseOutline />} onBack={() => navigate(-1)} className='yan'>新品专区</NavBar>
            <div style={{position:"fixed",top:'0.9rem',left:'0',right:'0',bottom:'0',overflow:'auto'}}>
                <div className='xpzq-div'>
                    <p className='xpzq-p'>每周上新</p>
                    <p>————&nbsp;为您精选健康好物&nbsp;————</p>
                </div>
                {sisilist.map((item, index) => {
                    return (
                        <div key={index} className='xpzq-div1'>
                            <img src={item.img} alt="" className='' style={{
                                width: '2rem',
                                height: '2rem'
                            }} />
                            <div>
                                <p>{item.name}</p>
                                <p className='list-p4' >{item.name}{item.name}{item.name}</p>
                                <p className='list-p4'>
                                    <span className='list-span2'>￥{item.xprice}</span>
                                    <span className='list-span4'>马上抢</span>
                                </p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
export default Xpzq;